<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}长者照护计划系统{% endblock %}</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <!-- Custom CSS -->
    <link href="{{ url_for('static', filename='css/custom.css') }}" rel="stylesheet">
    {% block extra_css %}{% endblock %}
</head>
<body class="tech-body">
    <!-- 科技网格背景 -->
    <div class="tech-grid-bg"></div>

    <nav class="navbar navbar-dark tech-navbar fixed-top">
        <div class="container-fluid">
            <a class="navbar-brand" href="{{ url_for('views_page.index') }}">
                <span class="brand-icon"><i class="fas fa-robot"></i></span>
                <span class="brand-text">长者照护计划系统</span>
            </a>
        </div>
    </nav>

    <!-- 水平图标导航栏 -->
    <div class="tech-icon-navbar">
        <div class="container-fluid">
            <div class="tech-icon-nav-container">
                <a class="tech-icon-nav-item {% if request.endpoint == 'views_page.index' %}active{% endif %}" href="{{ url_for('views_page.index') }}">
                    <i class="fas fa-home"></i>
                    <span>首页</span>
                </a>
                <a class="tech-icon-nav-item {% if request.endpoint == 'views_page.generate_schedule_page' %}active{% endif %}" href="{{ url_for('views_page.generate_schedule_page') }}">
                    <i class="fas fa-calendar-plus"></i>
                    <span>生成排班</span>
                </a>
                <a class="tech-icon-nav-item {% if request.endpoint == 'views_page.view_schedule_page' %}active{% endif %}" href="{{ url_for('views_page.view_schedule_page') }}">
                    <i class="fas fa-calendar"></i>
                    <span>查看排班</span>
                </a>
                <a class="tech-icon-nav-item {% if request.endpoint == 'views_page.three_shift_schedule_page' %}active{% endif %}" href="{{ url_for('views_page.three_shift_schedule_page') }}">
                    <i class="fas fa-calendar-alt"></i>
                    <span>三班制排班</span>
                </a>
                <a class="tech-icon-nav-item {% if request.endpoint == 'views_page.simple_three_shift_schedule_page' %}active{% endif %}" href="{{ url_for('views_page.simple_three_shift_schedule_page') }}">
                    <i class="fas fa-calendar-check"></i>
                    <span>简化版三班制</span>
                </a>
                <a class="tech-icon-nav-item {% if request.endpoint == 'views_page.nursing_actions_page' %}active{% endif %}" href="{{ url_for('views_page.nursing_actions_page') }}">
                    <i class="fas fa-notes-medical"></i>
                    <span>护理动作</span>
                </a>
                <a class="tech-icon-nav-item {% if request.endpoint == 'views_page.elders_page' %}active{% endif %}" href="{{ url_for('views_page.elders_page') }}">
                    <i class="fas fa-user-friends"></i>
                    <span>老人信息</span>
                </a>
                <a class="tech-icon-nav-item {% if request.endpoint == 'views_page.caregivers_page' %}active{% endif %}" href="{{ url_for('views_page.caregivers_page') }}">
                    <i class="fas fa-user-nurse"></i>
                    <span>护理员信息</span>
                </a>
                <a class="tech-icon-nav-item {% if request.endpoint == 'views_page.shift_assignments_page' %}active{% endif %}" href="{{ url_for('views_page.shift_assignments_page') }}">
                    <i class="fas fa-clipboard-list"></i>
                    <span>护理员排班表</span>
                </a>
                <a class="tech-icon-nav-item {% if request.endpoint == 'views_page.schedule_results_page' %}active{% endif %}" href="{{ url_for('views_page.schedule_results_page') }}">
                    <i class="fas fa-clipboard-check"></i>
                    <span>照护计划总表</span>
                </a>
                <a class="tech-icon-nav-item {% if request.endpoint == 'views_page.time_slots_page' %}active{% endif %}" href="{{ url_for('views_page.time_slots_page') }}">
                    <i class="fas fa-clock"></i>
                    <span>照护计划分表</span>
                </a>
                <a class="tech-icon-nav-item {% if request.endpoint == 'views_page.config_params_page' %}active{% endif %}" href="{{ url_for('views_page.config_params_page') }}">
                    <i class="fas fa-cogs"></i>
                    <span>配置参数</span>
                </a>
            </div>
        </div>
    </div>

    <div class="container-fluid">
        <div class="row">
            <main class="col-12 px-md-4 main-content tech-main">
                <div class="tech-header">
                    <h1 class="h2 tech-title">{% block page_title %}{% endblock %}</h1>
                </div>

                {% with messages = get_flashed_messages(with_categories=true) %}
                    {% if messages %}
                        {% for category, message in messages %}
                            <div class="alert tech-alert alert-{{ category }}">
                                <i class="fas {% if category == 'success' %}fa-check-circle{% elif category == 'danger' %}fa-exclamation-triangle{% elif category == 'warning' %}fa-exclamation-circle{% else %}fa-info-circle{% endif %}"></i>
                                {{ message }}
                            </div>
                        {% endfor %}
                    {% endif %}
                {% endwith %}

                <div class="tech-content">
                {% block content %}{% endblock %}
                </div>
            </main>
        </div>
    </div>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- Custom JS -->
    <script src="{{ url_for('static', filename='js/custom.js') }}"></script>
    {% block extra_js %}{% endblock %}
</body>
</html>
